<template>
  <div class="m-check-card app-container">
    <el-card>
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="项目简称">
          <el-input v-model="searchForm.projectBrief" placeholder="请输入项目简称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="searchList()">搜索</el-button>
          <el-button @click="reSet()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card header="项目列表" class="m-list" v-loading="loading">
      <div v-if="projectList.length">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item, index) in projectList" :key="index" class="card-box">
            <el-card shadow="hover">
              <template #header>
                <el-tag
                  size="large"
                  :color="item.projectStatus === '已完成' ? '#67c23a' : ''"
                  style="position: relative; float: right; right: -20px; top: -18px"
                >
                  <svg-icon icon-class="project-state" class="icons" />&nbsp;
                  {{ item.projectStatus }}
                </el-tag>
                <div class="card-header">
                  <span style="font-size: 16px; font-weight: 600">{{ item.projectBrief }}</span>
                </div>
              </template>
              <div class="content-text">
                <svg-icon icon-class="projectType" />
                &nbsp;&nbsp;项目类型：{{ item.projectType }}
              </div>
              <div class="content-text">
                <el-icon><User /></el-icon>
                &nbsp;&nbsp;客户：{{ item.clientName }}
              </div>
              <div class="content-text">
                <el-icon><Clock /></el-icon>
                &nbsp;&nbsp;启动时间：{{ item.projectStartTime }}
              </div>
              <template #footer>
                <div class="footer">
                  <div
                    class="flex-center item-child"
                    style="background-color: #f7faff"
                    @click="gotoContract(item)"
                  >
                    <el-icon size="18px" color="#333"><Folder /></el-icon>
                    <span class="footer-text">&nbsp;&nbsp;合同管理</span>
                  </div>
                  <div
                    class="flex-center item-child"
                    @click="gotoHome(item.id)"
                    style="background-color: #f7fff3"
                  >
                    <el-icon size="18px" color="#333"><Edit /></el-icon>
                    <span class="footer-text">&nbsp;&nbsp;项目详情</span>
                  </div>
                </div>
              </template>
            </el-card>
          </el-col>
        </el-row>
        <div class="pagination">
          <el-pagination
            v-model:currentPage="searchForm.pageNum"
            v-model:page-size="searchForm.pageSize"
            :page-sizes="[8, 12, 16, 20]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div v-else>
        <el-empty description="什么都没有╮(╯▽╰)╭" />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router'
  import { ref, onMounted } from 'vue'
  import { postProjectChargeSearch } from '@/api/controller/project-controller/index'
  import { usePermissionStore } from '@/store/modules/permission'
  const PermissionStore = usePermissionStore()
  const router = useRouter()
  //项目详情页
  const gotoHome = (id) => {
    router.push({
      name: 'projectInfo',
      state: { id: id },
    })
  }
  //合同管理页
  const gotoContract = (item) => {
    PermissionStore.setCacheFlag(false)
    setTimeout(() => {
      router.push({
        name: 'contract',
        state: { projectNumber: item.projectNumber, id: item.id },
      })
    }, 100)
  }
  const total = ref()
  const projectList = ref([])
  const searchForm = ref({
    projectBrief: '',
    pageNum: 1,
    pageSize: 8,
  })
  const loading = ref(true)
  //获取数据
  const searchList = async () => {
    try {
      loading.value = true
      let res = await postProjectChargeSearch(searchForm.value)
      projectList.value = res.data.list
      total.value = res.data.total
    } finally {
      loading.value = false
    }
  }
  //分页
  const handleSizeChange = (val: number) => {
    searchForm.value.pageSize = val
    searchList()
  }
  const handleCurrentChange = (val: number) => {
    searchForm.value.pageNum = val
    searchList()
  }
  const reSet = async () => {
    searchForm.value = {
      projectBrief: '',
      pageNum: 1,
      pageSize: 8,
    }
    await searchList()
  }
  onMounted(async () => {
    await searchList()
  })
</script>

<style lang="scss" scoped>
  .m-list {
    margin-top: 10px;
    ::v-deep(.el-card__footer) {
      padding: 6px;
    }
    ::v-deep(.el-tag) {
      border: #0090f0;
      background-color: #0090f0;
      color: #fff;
    }
    .card-header {
      display: -webkit-box; /* 使用弹性盒子布局模型 */
      -webkit-box-orient: vertical; /* 垂直排列子元素 */
      -webkit-line-clamp: 1; /* 限制在两行 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
      line-height: 1.5em;
    }
    :deep(.el-card__footer) {
      padding: 0px;
    }
  }
  .content-text {
    font-size: 14px;
    line-height: 30px;
    color: rgba($color: #000000, $alpha: 0.8);
    display: -webkit-box; /* 使用弹性盒子布局模型 */
    -webkit-box-orient: vertical; /* 垂直排列子元素 */
    -webkit-line-clamp: 1; /* 限制在两行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
  }
  .pagination {
    margin-top: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    .footer-text {
      margin-left: 0px;
      font-size: 14px;
      color: #333;
    }
    .item-child {
      flex: 1;
      padding: 12px 0;
      color: #7f7f7f;
      position: relative;
      cursor: pointer;
      font-size: 12px;
    }
    .item-child:after {
      position: absolute;
      right: 0;
      content: '';
      display: block;
      height: 30px;
      border-right: 1px solid #cdd1d8;
    }
    .item-child:last-child:after {
      display: none;
    }
  }
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
  .a {
    color: rgb(118, 214, 247);
  }
  .card-box {
    margin-bottom: 20px;
  }
</style>
